<template>
	<view style="padding:0 0 300rpx;" >
    <public-loading></public-loading>
    <z-nav-bar id="nav" bgColor="#ffffff" title="实名认证"></z-nav-bar>
		<view class="notice">
			企业认证须知：认证资料仅用于平台认证相关用途。
		</view>

		<uni-forms ref="formRef" :rules="rules" :modelValue="formData">
			<view class="uploader previous">
				<z-upload-image limit="1" v-model:files="formData.idCardFrontUrl" action-type="custom">
					<view class="adrift">
						<image class="icon" src="http://www.xvopen.com/xiaoV/img1/camera.png"></image>
						<view class="describe">请上传清晰的身份证人像面照片</view>
					</view>
				</z-upload-image>
			</view>
			<view class="uploader">
				<z-upload-image limit="1" v-model:files="formData.idCardBackUrl" action-type="custom">
					<view class="adrift">
						<image class="icon" src="http://www.xvopen.com/xiaoV/img1/camera.png"></image>
						<view class="describe">请上传清晰的身份证国徽面照片</view>
					</view>
				</z-upload-image>
			</view>
			<view class="list-cell-section">
				<view class="list-cell-item">
					<view class="label">姓名</view>
					<view class="value">
						<uni-forms-item required name="loginName">
							<uni-easyinput
								v-model="formData.loginName" :placeholder="rules['loginName'].rules[0].errorMessage"
								:placeholderStyle="placeHolder.styles" :input-border="false" trim :clearable="false"
							/>
						</uni-forms-item>
					</view>
					</view>
				<view class="list-cell-item">
					<view class="label">手机号</view>
					<view class="value">
						<uni-forms-item required name="phoneNumber">
							<uni-easyinput
								v-model="formData.phoneNumber" :placeholder="rules['phoneNumber'].rules[0].errorMessage"
								:placeholderStyle="placeHolder.styles" :input-border="false" trim :clearable="false"
							/>
						</uni-forms-item>
					</view>
				</view>
				<view class="list-cell-item">
					<view class="label">身份证号码</view>
					<view class="value">
						<uni-forms-item required name="idCard">
							<uni-easyinput
								v-model="formData.idCard" :placeholder="rules['idCard'].rules[0].errorMessage"
								:placeholderStyle="placeHolder.styles" :input-border="false" trim :clearable="false"
							/>
						</uni-forms-item>
					</view>
				</view>
			</view>
		</uni-forms>
		<view class="bottom-btn-box">
			<main-button :color="'#fff'" :margin="'24rpx 0 0'" @click="submit">认证</main-button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { validatePhoneNumber, validateIdCard } from '@/utils/validate'
import { navigateBack } from '@/utils/navigator'
import { CustomPlaceHoder } from '@/utils/common'
import {userAuthentication} from '@/api/pagesMy/user'
import {getInfo} from '@/api/login'
import { useStore } from '@/stores/user'
const placeHolder = new CustomPlaceHoder({ fontSize: '28rpx', textAlign: 'right' })
const userInfo = useStore()
const formRef = ref()
const formData = reactive({
  idCardFrontUrl:"",
  idCardBackUrl:"",
  phoneNumber:userInfo.userInfo.phonenumber,
  idCard: '',
  loginName:"",

})
const rules = ref({
  loginName: {rules: [{ required: true, errorMessage: '请输入姓名' }]},
  phoneNumber: {
        rules: [
			{ required: true, errorMessage: '请输入电话' },
            { validateFunction: validatePhoneNumber }
		]
    },
	idCard: {
		rules: [
			{ required: true, errorMessage: '请输入身份证号码' },
			// { validateFunction: validateIdCard }
		]
	}
})

const submit = async () => {
	if (formRef.value) {
		const result = await formRef.value.validate().catch(() => false)
		if(result) {
			if(!formData.idCardFrontUrl) {
				return uni.showToast({ title: '请上传身份证人像面照片', icon: 'none' })
			} else if(!formData.idCardBackUrl) {
				return uni.showToast({ title: '请上传身份证国徽面照片', icon: 'none' })
			}
			try {
				uni.showLoading({ title: '提交中', mask: true })
				let res = await userAuthentication({...formData,phonenumber:formData.phoneNumber}).then(res=>{
          navigateBack()
          //更新用户信息
          getInfo().then(res=> {
            userInfo.setUserInfo({
              ...res.user
            })
          })
          uni.showToast({ title:'提交审核成功，请耐心等待' })
        })
			} catch ({ errMsg }) {
				uni.showToast({ title: errMsg || '提交认证失败，请重试', icon: 'none' })
			} finally {
				uni.hideLoading()
			}

    	}
	}
}
</script>

<style lang="scss">
@import "./style/common.scss";
page{
		background-color: unset;
	}
.notice{
	width: 686rpx;
	min-height: 64rpx;
	background-color: rgba(0, 154, 232, 0.1);
	color: #0864BF;
	padding: 12rpx 20rpx;
	border-radius: 12rpx;
	margin: 20rpx 32rpx 24rpx;
}
.list-cell-section{
	border-top: 16rpx solid #F6F6F6;
	margin-top: 32rpx;
	.list-cell-item {
		display: flex;
		.value {
			margin-left: 30rpx;
			flex: 1;
			.uni-forms-item__error {
				left: unset;
				right: 0;
			}
		}
	}
}
.uploader {
	margin: 0 32rpx;
	height: 339rpx;
	border: 1rpx dashed #999;
	border-radius: 16rpx;
	&.previous {
		margin-bottom: 24rpx;
	}
	.adrift {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		.icon {
			width: 60rpx;
			height: 60rpx;
		}
		.describe {
			margin-top: 12rpx;
			white-space: nowrap;
		}
	}
}
</style>
